<template>
  <view class="spread">
    <view class="header">
      <u-notice-bar :text="text1"></u-notice-bar>
    </view>
    <view class="cont">
      <image
        class="image"
        :src="require('../../static/bgs.png')"
        mode=""
      ></image>
      <view class="content">
        <image class="logo" :src="avatar" mode=""></image>
        <view class="right">
          <view class="bold">
            {{ nickname }}
          </view>
          <!-- <view class="size">
						我的邀请人：{{ unpaid_order.name }}
						<text @click="show = true" v-if="!unpaid">填写</text>
					</view> -->
        </view>
      </view>
    </view>
    <view class="main" v-if="status == 2">
      <view class="white-box">
        <view class="tx">
          <view class="tx-grid">
            <view class="tx-grid-text">
              <view class="title">可提现佣金</view>
              <view class="money">
                <text>{{ balance }}</text>
                <text class="money-b">元</text>
              </view>
            </view>
          </view>
          <view
            class="tx-grid"
            @click="navTo('/bundle/pages/commission/withdraw/withdraw')"
            ><span class="tx-grid-comm-sign">立即提现</span></view
          >
        </view>
        <!-- <view class="palace palace-one">
					<view class="palace-grid">
						<view class="palace-grid-text">
							<view class="palace-grid-text-data">
								<text>{{ userData.coming }}</text>
								<text class="palace-grid-text-data-b">元</text>
							</view>
							<view class="palace-grid-text-name">即将到账</view>
						</view>
					</view>
					<view class="palace-grid">
						<view class="palace-grid-text">
							<view class="palace-grid-text-data">
								<text>{{ userData.came }}</text>
								<text class="palace-grid-text-data-b">元</text>
							</view>
							<view class="palace-grid-text-name">累计到账</view>
						</view>
					</view>
					<view class="palace-grid">
						<view class="palace-grid-text">
							<view class="palace-grid-text-data">
								<text>{{ userData.withdrawed }}</text>
								<text class="palace-grid-text-data-b">元</text>
							</view>
							<view class="palace-grid-text-name">累计提现</view>
						</view>
					</view>
				</view> -->
      </view>
    </view>
    <view class="main" v-else>
      <view class="title"> 申请成为分销会员 </view>

      <view class="" v-if="isSubmit === false">
        <view class="ipt">
          <text>真实姓名：</text>
          <u--input
            class="input"
            placeholder="请输入真实姓名"
            border="none"
            v-model="realname"
            fontSize="14"
          >
          </u--input>
        </view>
        <view class="ipt">
          <text>手机号码：</text>
          <u--input
            class="input"
            placeholder="请输入手机号码"
            border="none"
            v-model="tel"
            fontSize="14"
            type="number"
          ></u--input>
        </view>
        <!-- <view class="ipt" @click="showCity">
					<text>现住省份：</text>
					<u--input
						class="input"
					    placeholder="请选择省市区"
					    border="none"
						v-model="city"
						fontSize="14"
						disabled
						disabledColor="transparent"
					  ></u--input>
					<u-icon name="arrow-right"></u-icon>
				</view> -->
        <view class="ipt start">
          <text>申请原因：</text>
          <textarea
            class="input textarea"
            placeholder="必填"
            v-model="reason"
          ></textarea>
        </view>
      </view>

      <view class="result" v-if="isSubmit === true">
        <image
          class="icon"
          :src="require('../../static/icon_success.png')"
          mode=""
        ></image>

        <view class="p1">
          {{
            status === 1
              ? "已提交，等待客服审核..."
              : status === 2
              ? "申请已通过"
              : "申请已被拒绝"
          }}
        </view>

        <view class="info" v-if="false">
          <view class=""> 真实姓名：<text>233</text> </view>
          <view class=""> 手机号码：<text>233</text> </view>
          <view class=""> 现住省份：<text>233</text> </view>
          <view class=""> 申请原因：<text>233</text> </view>
        </view>
      </view>
    </view>

    <view class="btn" @click="submit" v-if="status != 2">
      {{ isSubmit ? "重新申请" : "立即申请" }}
    </view>

    <view class="tips" v-if="status != 2">
      提交成功后，我们将会在1-2个工作日内给您回复
    </view>
    <view class="main" v-if="status == 2"
      >　
      <view class="" style="margin-bottom: 50rpx">
        <u-grid :border="false" col="4">
          <u-grid-item
            v-for="(listItem, listIndex) in list"
            :key="listIndex"
            @click="navTo(listItem.page)"
          >
            <image
              :src="listItem.img"
              style="width: 80rpx; margin-top: 30rpx"
              mode="widthFix"
            ></image>
            <text class="grid-text">{{ listItem.title }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <!-- 城市选择 -->
    <mpvueCityPicker ref="city" @onConfirm="onConfirm"></mpvueCityPicker>

    <u-popup
      :show="show"
      @close="show = false"
      mode="center"
      round="20"
      :closeable="true"
    >
      <view class="popup">
        <view class="h1"> 填写邀请人 </view>

        <view class="enter">
          <text>邀请码</text>
          <input
            class="uni-input"
            v-model="code"
            placeholder="请输入邀请码"
            placeholder-style="font-size:28rpx"
          />
        </view>

        <view class="sure" @click="sure"> 确定 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import mpvueCityPicker from "../../../components/mpvue-citypicker/mpvueCityPicker.vue";
export default {
  data() {
    return {
      text1: "成为分销会员，推广下级可获得额外收益，推广越多收益越多",
      name: "无",
      realname: "",
      tel: "",
      city: "",
      reason: "",
      avatar: "",
      nickname: "",
      unpaid_order: {
        name: "无",
      },
      unpaid: 1,
      show: false,
      code: "",
      isSubmit: null,
      status: 0,
      userData: {
        balance: 0,
      },
      balance: 0,
      list: [
        {
          name: "photo",
          title: "技师佣金",
          img: "../../../static/images/icon_fenxiao.png",
          page: "/bundle/pages/mybrokerage/mybrokerage?type=1",
        },
        {
          name: "lock",
          title: "用户佣金",
          img: "../../../static/images/icon_fenxiao.png",
          page: "/bundle/pages/mybrokerage/mybrokerage?type=0",
        },
        {
          name: "star",
          title: "我的邀请",
          img: "../../../static/images/logistics_pay.png",
          page: "/bundle/pages/invitation/invitation?type=1",
        },

        // {
        // 	name: 'home',
        // 	title: '邀请技师,
        // 	img:'../../../static/images/logistics_delivered.png',
        // 	page:'/bundle/pages/h5-share/h5-share?type=2'
        // },
        {
          name: "star",
          title: "邀请用户",
          img: "../../../static/images/logistics_delivered.png",
          page: "/bundle/pages/h5-share/h5-share?type=0",
        },
      ],
    };
  },
  components: {
    mpvueCityPicker,
  },
  onLoad() {
    this.loadData();
    this.init();
  },
  methods: {
    navTo(url) {
      uni.navigateTo({
        url,
      });
    },
    async loadData() {
      this.$http.post("api/withdraw/withdraw", {}).then((res) => {
        let { balance } = res;
        this.balance = balance;
      });

      //this.list = await this.$api.json('incomeMonth');
    },
    init() {
      // 获取申请页
      this.$http.post("api/distribution/index").then((res) => {
        console.log(res);
        // "status": 0 //0未申请；1待审核；2通过；3拒绝
        let { status } = res;
        this.status = status;
        console.log(this.status);
        this.isSubmit = Boolean(status);
      });
      // 获取个人信息
      this.$http.post("api/user/userInfo").then((res) => {
        let { avatar, nickname, unpaid_order, unpaid } = res;
        this.avatar = avatar;
        (this.nickname = nickname), (this.unpaid_order = unpaid_order);
        this.unpaid = unpaid;
      });
    },
    showCity() {
      this.$refs.city.showPicker = true;
    },
    onConfirm(e) {
      let { label } = e;
      this.city = label;
    },
    submit() {
      if (this.isSubmit) {
        this.isSubmit = !this.isSubmit;
        return;
      }
      let obj = {
        realname: this.realname,
        mobile: this.tel,
        reason: this.reason,
      };
      console.log(obj);
      let arr = Object.values(obj);
      console.log(arr);
      let onoff = arr.every((item) => {
        return item;
      });
      if (!onoff) {
        uni.showToast({
          icon: "none",
          title: "请输入完整信息",
        });
        return;
      }
      this.$http.post("api/distribution/apply", obj).then((res) => {
        this.isSubmit = true;
        this.init();
      });
    },
    sure() {
      if (!this.code) {
        uni.showToast({
          icon: "none",
          title: "请输入邀请码",
        });
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.grid-text {
  margin-top: 5rpx;
  font-size: 26rpx;
}
.white-box {
  .tx {
    padding-top: 26rpx;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-content: center;

    &-grid {
      box-sizing: border-box;

      &:first-child {
        margin-left: 40rpx;
      }

      &-comm-sign {
        display: block;
        border-radius: 40rpx 0 0 40rpx;
        font-size: 26rpx;
        padding: 16rpx 44rpx;
        background: linear-gradient(to right, #fef082, #ffc551);
        background-color: #fef082;
        color: #cf4400;
      }

      &-text {
        display: block;
        color: #333;
        font-size: 26rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        .title {
          font-size: 26rpx;
          font-weight: normal;
          color: #ff6423;
        }

        .money {
          font-size: 60rpx;
          color: #ff6423;
          letter-spacing: 2rpx;
          margin-bottom: 10rpx;

          &-b {
            font-size: 28rpx;
          }
        }
      }
    }
  }

  .palace {
    padding-bottom: 20rpx;
    overflow: hidden;
    display: flex;
    justify-content: center;

    &-grid {
      flex: 1;
      position: relative;
      box-sizing: border-box;

      &:not(:last-child) {
        &:after {
          width: 1rpx;
          height: 80rpx;
          background: #fddece;
          content: " ";
          display: inline-block;
          position: absolute;
          top: 0;
          right: 0;
        }
      }

      &-text {
        display: block;
        text-align: center;
        color: #333;
        font-size: 32rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        &-name {
          font-size: 26rpx;
          font-weight: normal;
          color: #ff8a4a;
        }

        &-data {
          font-size: 32rpx;
          color: #ff8a4a;
          letter-spacing: 2rpx;
          margin-bottom: 5rpx;

          &-b {
            font-size: 20rpx;
          }
        }
      }
    }
  }
}

.cont {
  position: relative;

  .image {
    width: 100%;
    height: 280rpx;
    position: absolute;
    top: 0;
    left: 0;
  }

  .content {
    position: relative;
    display: flex;
    padding: 21rpx 0 0 30rpx;

    .logo {
      width: 116rpx;
      height: 116rpx;
      border-radius: 50%;
      box-sizing: border-box;
      flex-shrink: 0;
      background-color: azure;
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 20rpx;
      justify-content: center;
      color: white;

      .bold {
        font-size: 38rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .size {
        display: flex;
        color: white;
        font-size: 24rpx;
        align-items: center;

        text {
          height: 22px;
          width: 53px;
          background-color: #ff838d;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 22px;
          margin-left: 20rpx;
        }
      }
    }
  }
}

.main {
  margin: 50rpx 20rpx 0;
  background-color: white;
  border-radius: 20rpx;
  padding: 21rpx 0 0;
  overflow: hidden;
  position: relative;
  z-index: 99;

  .title {
    color: #333;
    font-size: 38rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .ipt {
    font-size: 28rpx;
    color: #303133;
    display: flex;
    align-items: center;
    border: 2rpx solid #e5e5e5;
    padding: 20rpx 28rpx;
    margin: 0 32rpx 32rpx;

    text {
      color: #303133;
      font-size: 28rpx;
      width: 5em;
      flex-shrink: 0;
    }

    .input {
      flex: 1;
    }
  }

  .textarea {
    font-size: 28rpx;
    height: 80rpx;
  }

  .start {
    align-items: flex-start;
  }
}

.btn {
  margin: 20rpx;
  height: 86rpx;
  line-height: 86rpx;
  text-align: center;
  border-radius: 86rpx;
  color: white;
  font-size: 32rpx;
  background-color: #ff2c3c;
}

.tips {
  color: #666;
  font-size: 24rpx;
  text-align: center;
  padding: 20rpx 0;
}

.h1 {
  padding: 26rpx;
  text-align: center;
  font-size: 36rpx;
  color: #303133;
}

.popup {
  width: 620rpx;

  .enter {
    display: flex;
    padding: 0 32rpx;
    align-items: center;
    margin-top: 20rpx;

    text {
      width: 5em;
      color: #333;
      font-size: 28rpx;
    }

    input {
      flex: 1;
      font-size: 28rpx;
    }
  }

  .sure {
    padding: 0 96rpx;
    height: 84rpx;
    background-color: #ff2c3c;
    color: white;
    font-size: 28rpx;
    display: flex;
    text-align: center;
    justify-content: center;
    line-height: 84rpx;
    margin: 64rpx;
    border-radius: 10rpx;
  }
}

.result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .icon {
    width: 106rpx;
    height: 106rpx;
  }

  .p1 {
    color: #303133;
    font-size: 28rpx;
    margin-top: 10rpx;
    padding-bottom: 30rpx;
  }

  .info {
    padding: 30rpx 14rpx 30rpx;
    width: calc(100% - 28rpx);
    border-top: 2rpx solid #e5e5e5;

    view {
      color: #303133;
      font-size: 28rpx;
      padding: 10rpx 30rpx;
    }
  }
}
</style>
